import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Button, Table, Pagination, Bubble } from 'tea-component';
import * as actionTypes from '@src/model/actionType';
import { timeFormatYMDHms, getQueryVariable, abbreviation } from '@src/utils/index';
import { useHistory, Link } from 'react-router-dom';

const { autotip, scrollable } = Table.addons;

const DEFAULT_PAGE_INDEX = 1;
const DEFAULT_PAGE_SIZE = 10;

export function Transaction() {
  const chainId = decodeURIComponent(getQueryVariable('chainid') || '');
  const blockHash = decodeURIComponent(getQueryVariable('blockHash') || '');
  const history = useHistory();
  const dispatch = useDispatch();
  const [pageIndex, setPageIndex] = useState(DEFAULT_PAGE_INDEX);
  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);

  const fetchTxList = ({ pageIndex = DEFAULT_PAGE_INDEX, pageSize = DEFAULT_PAGE_SIZE }) => {
    dispatch({
      type: actionTypes.fetchTxList,
      params: {
        ChainId: chainId,
        TxId: '',
        BlockHash: blockHash,
        StartTime: 0,
        EndTime: 0,
        Offset: pageIndex - 1,
        Limit: pageSize,
      },
    });
  };

  // @ts-ignore
  const txListStore = useSelector((state) => state.txListReducer);

  useEffect(() => {
    fetchTxList({ pageIndex: DEFAULT_PAGE_INDEX, pageSize: DEFAULT_PAGE_SIZE });
  }, [dispatch]);

  const onPagingChange = ({ pageIndex, pageSize }) => {
    setPageIndex(pageIndex);
    setPageSize(pageSize);
    fetchTxList({ pageIndex, pageSize });
  };
  return (
    <div
      style={{
        border: '1px solid #DDDDDD',
        backgroundColor: '#fff',
      }}
    >
      <Table
        className="block-detail-transaction"
        style={{ width: '100%', margin: '0px auto' }}
        verticalTop
        records={txListStore.transactionList.GroupList}
        recordKey="Id"
        bordered={false}
        columns={[
          {
            key: 'TxId',
            header: '交易ID',
            // @ts-ignore
            render: (row) => {
              return (
                <Bubble
                  arrowPointAtCenter
                  placement="top"
                  content={
                    // @ts-ignore
                    row.TxId
                  }
                >
                  <Link
                    style={{ color: 'rgba(0, 0, 0, 0.9)', textDecoration: 'none' }}
                    // @ts-ignore
                    to={`/tsdetail?id=${encodeURIComponent(row.Id)}&tp=bk&chainid=${encodeURIComponent(chainId)}`}
                  >
                    {abbreviation(
                      // @ts-ignore
                      row.TxId,
                    )}
                  </Link>
                </Bubble>
              );
            },
          },
          {
            key: 'Sender',
            header: '交易发送者',
            width: 220,
          },
          {
            key: 'Timestamp',
            header: '创建时间',
            width: 240,
            // @ts-ignore
            render: (row) => <span>{timeFormatYMDHms(row.Timestamp)}</span>,
          },
          {
            key: 'settings',
            header: '操作',
            width: 200,
            render: (row) => (
              <Button
                type="link"
                onClick={() => {
                  // @ts-ignore
                  history.push(
                    `/tsdetail?id=${encodeURIComponent(row.Id)}&tp=bk&chainid=${encodeURIComponent(chainId)}`,
                  );
                }}
              >
                查看
              </Button>
            ),
          },
        ]}
        addons={[
          scrollable({
            maxHeight: 480,
          }),
          autotip({}),
        ]}
      />
      <Pagination
        recordCount={txListStore.transactionList.TotalCount}
        pageIndex={pageIndex}
        pageSize={pageSize}
        style={{ backgroundColor: '#fff', width: '100%', padding: '14px 20px' }}
        onPagingChange={onPagingChange}
      />
    </div>
  );
}
